<script setup lang="ts">
import { ref, type Ref } from 'vue';
import { useLoginStore } from '@/stores/login';
import { loginUser, type loginUserInfo } from '@/utils/api/request'

let loginData = useLoginStore(); // 共享的切换组件的数据
let storageUserName: string = localStorage.getItem('userName') || "" // 先看看是否有存储着的用户名
let userName: Ref<string> = ref(storageUserName); // 收集用户输入的用户名
let password: Ref<string> = ref(""); // 收集用户输入的密码
let storagePhoneEmail: string = localStorage.getItem('phoneEmail') || ""// 先看看是否有存储着的手机号码或邮箱
let phoneEmail: Ref<string> = ref(storagePhoneEmail); // 收集用户输入的手机号码或邮箱验证码
let phoneEmailCode: Ref<string> = ref(""); // 收集用户输入的放给其手机或邮箱的验证码
let verificaionCode: Ref<string> = ref(""); // 验证用户输入的验证码
let loginType: Ref<number> = ref(1); //切换登录模式
let storageUserMemoryed: boolean = storageUserName ? true : false // 先看看原先是否存储了用户
let isMemoryedUser: Ref<boolean> = ref(storageUserMemoryed); // 是否记住用户
let storagePhoneMailMemoryed: boolean = storagePhoneEmail ? true : false // 先看看原先是否存储了手机号码或邮箱
let isMemoryedPhoneMail: Ref<boolean> = ref(storagePhoneMailMemoryed); // 是否记住手机号码或邮箱

// 模拟验证码的代码，真实的验证码功能需后端协同
let randomCode: Ref<string> = ref((Math.floor(Math.random() * 9000) + 1000).toString());

/**
 * 更换验证码的函数
 */
function changeCode() {
    randomCode.value = (Math.floor(Math.random() * 9000) + 1000).toString();
}

/**
 * 更改登录模式的函数
 */
function changeLoginType() {
    if (loginType.value === 1) {
        loginType.value = 2;
    } else {
        loginType.value = 1
    }
    verificaionCode.value = "";
    changeCode();
}

/**
 * 登录校验的函数
 */
function loginVerify() {
    if (randomCode.value !== verificaionCode.value) {
        alert('验证码错误')
        verificaionCode.value = "";
    } else if (loginType.value === 1) {
        if (isMemoryedUser.value) {
            localStorage.setItem('userName', userName.value)
        } else {
            if (localStorage.getItem('userName')) {
                localStorage.removeItem('userName')
            }
        }
    } else {
        if (isMemoryedPhoneMail.value) {
            localStorage.setItem('phoneEmail', phoneEmail.value)
        } else {
            if (localStorage.getItem('phoneEmail')) {
                localStorage.removeItem('phoneEmail')
            }
        }
    }
    fetchLoginUser();
}

async function fetchLoginUser() {
    let userInfo: loginUserInfo = {
        loginType: loginType.value,
        userName: userName.value,
        password: password.value,
        phoneEmail: phoneEmail.value,
    };
    let res = await loginUser(userInfo);
    console.log(res);
    if (res.status) {
        alert('登录成功')
    } else {
        alert(`登录失败,\n ${res.message}`)
    }
}


/**
 * 切换组件的函数
 */
function changeComponent() {
    loginData.componentName = 'register';
}

</script>
<template>
    <div class="login-user" v-if="loginType === 1">
        <div class="user-name">
            <img src="../assets/images/user.png" alt="">
            <input type="text" placeholder="请输入用户名" v-model="userName">
        </div>
        <div class="password">
            <img src="../assets/images/password.png" alt="">
            <input type="password" placeholder="请输入密码" minlength="6" maxlength="18" v-model="password">
        </div>
    </div>
    <div class="login-phoneEmail" v-else>
        <div class="user-name">
            <img src="../assets/images/mail.png" alt="">
            <input type="text" placeholder="请输入手机号码或邮箱" v-model="phoneEmail">
        </div>
        <div class="password">
            <img src="../assets/images/password.png" alt="">
            <input type="password" maxlength="6" v-model="phoneEmailCode" placeholder="请输入手机或邮箱上的验证码">
        </div>
    </div>
    <div class="verificaion">
        <div class="verificaion-input">
            <img src="../assets/images/verificaion.png" alt="">
            <input type="text" placeholder="请输入验证码" maxlength="4" v-model="verificaionCode">
        </div>
        <div class="verificaion-code" @click="changeCode()">
            {{ randomCode }}
        </div>
    </div>
    <div class="switch" v-if="loginType === 1">
        <span class="fakelink" @click=changeLoginType()>手机号码/邮箱登录</span>
        <span><input type="checkbox" name="memoryUser" id="memoryUser" v-model="isMemoryedUser">记住用户名</span>
    </div>
    <div class="switch" v-else>
        <span class="fakelink" @click=changeLoginType()>用户名登录</span>
        <span><input type="checkbox" name="memoryUser" id="memoryUser" v-model="isMemoryedPhoneMail">记住手机号码/邮箱</span>
    </div>
    <button class="login" @click="loginVerify()">登录</button>
    <div class="bottom" @click="changeComponent()">注册</div>
</template>

<style scoped>
.verificaion {
    display: flex;
}

.user-name,
.password,
.verificaion-input,
.verificaion-code {
    width: 400px;
    height: 60px;
    margin-top: 20px;
    border: 1px solid #414f8e;
    box-shadow: 0 0 0 1px #3d4c8a;
    background-color: transparent;
}

.user-name {
    margin-top: 60px;
}

.verificaion-input {
    width: 200px;
}

.verificaion-code {
    width: 160px;
    margin-left: 40px;
    line-height: 60px;
    text-align: center;
    font-size: 32px;
    color: var(--base-color);
    background-image: url('https://gd-hbimg.huaban.com/aa3c7f23dfdc7b2d317aa4b77bd6c7b8469564d2dfa8b-Btd5c6_fw658webp');
}

.user-name img,
.password img,
.verificaion-input img {
    width: 32px;
    height: 32px;
    margin: 14px;

}

.user-name input,
.password input,
.verificaion-input input {
    height: 50px;
    width: 320px;
    vertical-align: bottom;
    margin-bottom: 10px;
    /* 调整对齐的基线*/
    border: none;
    /* 去除输入框的边框 */
    background-color: transparent;
    color: #fff;
    font-size: 16px;
}

.verificaion-input input {
    width: 120px;
}

.user-name input:focus,
.password input:focus,
.verificaion-input input:focus {
    outline: none;
    /* 去除点击输入框后的边框 */
}


.switch {
    margin: 20px 0;
    color: #fff;
}

.switch .fakelink {
    text-decoration: underline;
}

.switch .fakelink:hover {
    cursor: default;
}

.switch #memoryUser {
    margin-left: 180px;
}

.login {
    width: 100%;
    height: 40px;
    font-size: 18px;
    background-color: #43c8f4;
    color: #fff;
    border: none;
    border-radius: 5px;
}

.bottom {
    width: 100%;
    margin-top: 15px;
    text-align: center;
    text-decoration: underline;
    cursor: default;
}
</style>